<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/-icons@1.5.0/font/bootstrap-icons.css">
    <style>
        thead{
            background-color: #343a40;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
        tbody{
            text-align: center;
        }
        td{
            height: 50px;
            line-height: 50px;
        }
        .buynum>span:first-of-type{
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 1px solid gray;
            line-height: 35px;
            text-align: center;
            font-size: 24px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        .buynum>span:nth-child(2){
            display: inline-block;
            width: 100px;
            height: 40px;
            line-height: 43px;
            text-align: center;
            background-color: #e9ecee;
            border: #d2d9de;
        }
        .buynum>span:last-of-type{
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 1px solid gray;
            line-height: 35px;
            text-align: center;
            font-size: 24px;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .count>span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
            <div class="row justify-content-sm-center mt-3">
                <div class="col-sm-4 card bg-light">
                    <div class="card-body">
                        <form>
                            <div class="form-group">
                                <label for="proname">产品名称</label>
                                <input type="text" class="form-control" id="proname" v-model="proname" >
                            </div>
                            <div class="form-group">
                                <label for="proprice">产品单价</label>
                                <input type="number" class="form-control" id="proprice" v-model="proprice" min=0 >
                            </div>
                            <div class="form-group">
                                <label for="pronum">购买数量</label>
                                <input type="text" class="form-control" id="pronum" v-model="pronum" >
                            </div>
                            <button type="button" class="btn btn-info btn-block" @click="addProduct()">添加到购物车</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="row justify-content-sm-center mt-3">
                <div  class="col-md-8 ">
                    <table class="table table-bordered">
                        <thead >
                            <th>
                                <input type="checkbox"  v-model="chooseAll"  @click="checkFlag()">
                            </th>
                            <th>编号</th>
                            <th>产品名称</th>
                            <th>产品单价</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </thead>
                        <tbody>
                            <tr v-if="products.length==0">
                                <td colspan="6" >暂未选择商品</td>
                            </tr>
                           <template v-else>
                            <tr v-for=" (value,index) in products ">
                                <td>
                                    <input type="checkbox"  :value="value"  @click="checkOne()" v-model="value.flag" > 
                                </td>
                                <td>{{value.idno}}</td>
                                <td>{{value.proname}}</td>
                                <td>{{value.proprice}}元</td>
                                <td class="buynum">
                                    <span @click="value.pronum++">+</span><span>{{ value.pronum }}</span><span @click="value.pronum>0?value.pronum--:''">-</span>
                                </td>
                                <td>
                                    <button type="button" class="btn  btn-danger " @click="removePro(index)">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">总计：</td>
                                <td colspan="3" class="count">
                                    被选中<span>{{ pitch }}</span>个，总价<span>{{ count }}</span>元
                                </td>
                                <td>
                                    <button type="button" class="btn  btn-danger " @click="removeChoosePro()">删除选中项</button>
                                </td>
                            </tr>
                           </template>
                        </tbody>
                    </table>
                </div>           
            </div>
              
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                idno:0,
                proname:"",
                proprice:"",
                pronum:"",
                products:[],
                chooseAll:""
            },
            computed:{
                pitch:function(){
                    var sum=0;
                    for(var i=0;i<this.products.length;i++ ){
                        if(this.products[i].flag){
                            sum+= this.products[i].pronum*1
                        }
                    }
                    return sum;
                },
                count:function(){
                    var sum=0;
                    for(var i=0;i<this.products.length;i++ ){
                        if(this.products[i].flag){
                        sum+= (this.products[i].pronum*1)*(this.products[i].proprice*1)
                        }
                    }
                    return sum;
                },
            },
            methods:{
                addProduct(){
                    this.idno++;
                    this.products.unshift({proname:this.proname,
                                           proprice:this.proprice,
                                           pronum:this.pronum,
                                           idno:this.idno,
                                           flag:false})
                },
                removePro(i){
                    this.products.splice(i,1);    
                },
                removeChoosePro(){
                    for(var i=0;i<this.products.length;i++ ){
                        if(this.products[i].flag){
                            this.products.splice(i,1);  
                        }
                    }
                },
                checkFlag(){
                    if(!this.chooseAll){
                        for(var i=0;i<this.products.length;i++ ){
                            this.products[i].flag=true;
                            }
                    }else{
                        for(var i=0;i<this.products.length;i++ ){
                            this.products[i].flag=false;
                    }
                    this.chooseAll= "";
                    }
                },
                // 单选影响全选出问题，sum值很奇怪
                checkOne(){
                    var sum=1
                    for(var i=0;i<this.products.length;i++ ){
                        if(this.products[i].flag){
                            sum++;  
                        }
                    }
                    console.log(sum);
                    if(sum==this.products.length){
                        this.chooseAll= true;
                    }else{
                        this.chooseAll= false;
                    }
                }
            }
        
        })
    </script>
</body>
</html>
